﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/ViewMasterPage.Master" Inherits="System.Web.Mvc.ViewPage<Epam.PhotoGallery.Site.Models.TimeLine>" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="htmlHeader" runat="server">
	<%	Html.Styles().Add("http://fonts.googleapis.com/css?family=Dancing+Script|Antic+Slab"); 
		Html.Styles().Add("Content/css/timeline.css");
		Html.Styles().Add("Content/css/styles.css");
		Html.Styles().Add("Content/css/jquery.fancybox.css");
		Html.Styles().Add("Content/css/gallery.css");

		Html.Scripts().Add("http://code.jquery.com/jquery-1.7.1.min.js");
		Html.Scripts().Add("Scripts/timeline-min.js");
		Html.Scripts().Add("Scripts/jquery.fancybox.pack.js");
		Html.Scripts().Add("Scripts/1TimeLineInit.js");
		Html.Scripts().Add("Scripts/1ShowAlbum.js");
		Html.Scripts().Add("Scripts/1GetScreenSize.js");
	%>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
	<p class="RefreshData" href='<%= Url.Content("~/gallery/index/true") %>' />
	<div id="timeline">
		<section>
					<time>2004, 5, 1</time>
					<h2>This is timeline <br />EPAM Mogilev offices</h2>
					<article>
						<p>Our office was founded at 2004</p>
					</article>
					<figure>						
						<img />
						<cite></cite>
						<figcaption></figcaption>
					</figure>
				</section>
		<ul>
			<% 
				foreach (var item in Model.Events)
				{
			%>
			<li>
				<time><%= item.StartDate.ToString("yyyy,MM,dd", System.Globalization.CultureInfo.InvariantCulture) %></time>
				<h3>
					<%= item.HeadLine %></h3>
				<article>
						<p><%= item.Description %></p>
						<a style= "color:White" href="#" onclick="ShowAlbum('<%=  item.Id %>','<%= Url.Content("~/Gallery/GetDataForAlbums")%>','<%= Url.Content("~/Repository/Albums/Images/") %>')">View Album</a> 
						
					</article>
				<figure>
						<script>
							document.write("<img class='albumCover' src='<%= Url.Content("~/Repository/Cover/Images/")%><%=item.Id%>.jpeg?w=" + getScreenSize().width + "&h=" + getScreenSize().height + "' />");
							
						</script>
						
						<cite><%= item.Creator %>`s camera</cite>
						<figcaption><%= item.Caption %></figcaption>
										
					</figure>
			</li>
			<%
					//break;
				}
			%>
		</ul>
		<!-- Timeline.js will generate the markup here -->
	</div>
</asp:Content>
